<template>
    <div class="search-container">
      <div class="search-box">
        <input
          type="text"
          class="search-input"
          placeholder="请输入商品名称或关键词"
          v-model="keyword" 
          @keyup.enter="handleSearch"
        />
        <button class="search-button" @click="handleSearch"> <!-- 点击触发搜索 -->
          <i class="iconfont icon-search"></i>
          搜索
        </button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const keyword = ref(''); // 定义响应式变量
  
  // 触发搜索事件
  const emit = defineEmits(['search']); // 定义自定义事件
  const handleSearch = () => {
    if (keyword.value.trim()) {
      emit('search', keyword.value); // 将关键词传递给父组件
    }
  };
  </script>
  
  <style scoped>
  .search-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px 0; /* 添加上下方的间隔 */
  }
  
  .search-box {
    display: flex;
    align-items: center;
    width: 800px;
    height: 45px;
    border: 2px solid #27ba9b; /* 保留边框 */
    border-radius: 20px;
    overflow: hidden;
  }
  
  .search-input {
    flex: 1;
    height: 100%;
    padding: 0 15px;
    border: none;
    outline: none;
    font-size: 14px;
    color: #333;
  }
  
  .search-input::placeholder {
    color: #999;
  }
  
  .search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100%;
    border: none;
    background-color: #27ba9b; /* 保留按钮颜色 */
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .search-button:hover {
    background-color: #1da88c; /* 保留悬停按钮颜色 */
  }
  
  .search-button .iconfont {
    margin-right: 5px;
    font-size: 16px;
  }
  </style>